<template>
	<view class="memberdetail" v-if="isShowDetail">
		<view class="wrapper">
			<view class="detail_header">
				<view class="detail_left">
					<view class="detatil_img">
						<image :src="memberDetail.head_img"  mode="scaleToFill" @error="imageError" @click.stop="preHeadImg(memberDetail.head_img)"></image>
					</view>
					<view class="detail_member">
						<view class="detail_top">
							<text>{{memberDetail.idcardname?memberDetail.idcardname:""}}</text>
							<text class="type_name">({{memberDetail.type_name}})</text>
						</view>
						<view class="detail_bot">
							<text class="sex">{{memberDetail.gender}}</text>
						</view>
					</view>
				</view>
				<view class="detail_status">
					<text>待审核</text>
				</view>
			</view>
			
			<view class="detail_content">
				<view class="cell">
					<view class="cell_lt">
						出身日期
					</view>
					<view class="cell_rt">
						{{memberDetail.birth?memberDetail.birth:""}}
					</view>
				</view>
				<view class="cell">
					<view class="cell_lt">
						证件类型
					</view>
					<view class="cell_rt">
						<text v-if="memberDetail.cardtype==1">身份证</text>
						<text v-if="memberDetail.cardtype==2">护照 </text>
						<text v-if="memberDetail.cardtype==4">台胞证</text>
						<text v-if="memberDetail.cardtype==8">港澳通行证</text>
					</view>
				</view>
				<view class="cell">
					<view class="cell_lt">
						证件号码
					</view>
					<view class="cell_rt">
						{{memberDetail.idcard?memberDetail.idcard:""}}
					</view>
				</view>
				<view class="cell">
					<view class="cell_lt">
						隶属机构
					</view>
					<view class="cell_rt">
						{{memberDetail.org_name?memberDetail.org_name:"暂无"}}
					</view>
				</view>
				<view class="cell">
					<view class="cell_lt">
						证书编号
					</view>
					<view class="cell_rt">
						{{memberDetail.book_no?memberDetail.book_no:"暂无"}}
					</view>
				</view>
			</view>
			
			<view class="detail_footer">
				<view class="footer_content">
					 <view class="pic_header">
							<view class="btns"></view>
							<view class="pic_num">
								身份证明
							</view>
					 </view>
					 <view class="pic_img">
					 	<image :src="memberDetail.idcard_img" mode="" @error="idcardError" @click.stop="preCardImg(memberDetail.idcard_img)"></image>
					 </view>
				</view>
				<view class="footer_content">
					 <view class="pic_header">
							<view class="btns"></view>
							<view class="pic_num">
								等级证书
							</view>
					 </view>
					 <view class="pic_img">
					 	<image :src="memberDetail.bookno_img" mode="" @error="booknoError" @click.stop="preLevelImg(memberDetail.bookno_img)"></image>
					 </view>
				</view>
			</view>
		</view>
		
		<uni-check
				:popup="popupData"
				:showPopup="showPopup"
				:isAgree="isAgree"
				:type="type"
				@toAgree='popupAgree'
				@toNotAgree='popupNotAgree'
				@toCancel="toCancel"
				class="popupchecking"
				>
		</uni-check>
		<view class="footer" v-if="showPopup==false">
			<button type="default" size="mini" class="no_agree" @click="refuse">拒绝</button>
			<button type="primary" size="mini" class="agree" @click="agree">同意</button>
		</view>
	</view>
</template>

<script>
	import {memDetail,checkMember,memCheckDetail} from "@/common/api.js";
	import uniCheck from "@/components/uni-event/uni-check.vue";
	export default{
		data(){
			return{
				id:"",
				id_next:"",
				memberDetail:{},
				isAuditing:false,
				popupData:{},
				showPopup:false,
				bookno_img:"",
				isShowDetail:false,
				isAgree:false,
				type:"noCheck",
				isPreHeadImg:false,  //是否预览头像
				isPrelevelImg:false,  //是否预览等级图片
				isPreCardImg:false, //是否预览身份图片
				imgPreList:[],  //预览的图片
			}
		},
		onLoad(e){
			var _this=this;
			_this.id=e.id
			// _this.id='74620';
			_this.getMemberDetail(_this.id)
			uni.showLoading({
				title:"加载中"
			})
			setTimeout(function(){
				_this.isShowDetail=true;
				uni.hideLoading()
			},1000)
		},
		components:{
			uniCheck
		},
		methods:{
			preHeadImg(imgSrc){
				var _this=this;
				if(imgSrc!=null&&imgSrc!=''&&_this.isPreHeadImg){
					uni.previewImage({
						current:imgSrc,
						urls:_this.imgPreList
					})
				}
			},
			preCardImg(imgSrc){
				var _this=this;
				if(imgSrc!=null&&imgSrc!=''&&_this.isPreCardImg){
					uni.previewImage({
						current:imgSrc,
						urls:_this.imgPreList
					})
				}
			},
			preLevelImg(imgSrc){
				var _this=this;
				if(imgSrc!=null&&imgSrc!=''&&_this.isPrelevelImg){
					uni.previewImage({
						current:imgSrc,
						urls:_this.imgPreList
					})
				}
			},
			getMemberDetail(id){
				var _this=this,data={
					id:id
				};
				memCheckDetail(data).then(function(res){
					var e=res.data;
					if(e.errcode==0){
							_this.memberDetail=e.data;
							_this.memberDetail['gender']=_this.memberDetail['sex']==0?"男":"女"
							var birthDay=_this.memberDetail["birthday"];
							_this.memberDetail['birth']=birthDay!=null?birthDay.slice(0,4)+"年"+birthDay.slice(4,6)+"月"+birthDay.slice(6,8)+"日":"";
							_this.memberDetail['head_img']=_this.memberDetail["idcard_img"]!=null&&_this.memberDetail["idcard_img"]!=''?"https:"+_this.$store.state.baseImgURL+_this.memberDetail["idcard_img"]:"https:"+_this.$store.state.baseImgURL+"img/cert/demo.png"
							_this.isPreHeadImg=_this.memberDetail["idcard_img"]!=null&&_this.memberDetail["idcard_img"]!=''?true:false
							_this.memberDetail["idcard_img"]=e.data.certificate!=null&&e.data.certificate!=''?"https:"+_this.$store.state.baseImgURL+e.data.certificate:"https:"+_this.$store.state.baseImgURL+"img/cert/no_certificate.jpg";
							_this.isPreCardImg=e.data.certificate!=null&&e.data.certificate!=''?true:false;
							_this.memberDetail["bookno_img"]=e.data.level_img!=null&&e.data.level_img!=''?"https:"+_this.$store.state.baseImgURL+e.data.level_img:"https:"+_this.$store.state.baseImgURL+"img/cert/no_level.jpg";
							_this.isPrelevelImg=e.data.level_img!=null&&e.data.level_img!=''?true:false;
							if(_this.isPreHeadImg){
								_this.imgPreList.push(_this.memberDetail['head_img'])
							}
							if(_this.isPreCardImg){
								_this.imgPreList.push(_this.memberDetail["idcard_img"])
							}
							if(_this.isPrelevelImg){
								_this.imgPreList.push(_this.memberDetail["bookno_img"])
							}
							_this.id_next=e.next_id;
						}else if(e.errcode==1000||e.errcode==1001){
							uni.removeStorageSync('token');
							uni.reLaunch({
								url:'/pages/home/welcome'
							})
					}else{
						uni.showToast({
							position: 'center',
							icon: 'none',
							title:e.msg
						});
					}
				})
			},
			refuse(){
				var _this=this;
				_this.isAgree=false;
				_this.popupData={
					cancelMsg:"取消",
					confirmMsg:"确认",
					isPopupHeader:true,
					isPopupInput:true,
					isPopupFooter:true,
					isPopupContent:false,
					title:'拒绝审核',
					name:_this.memberDetail.idcardname
				}
				_this.showPopup=true;
			},
			agree(){
				var _this=this;
				_this.isAgree=true;
				_this.popupData={
					cancelMsg:"取消",
					confirmMsg:"确认",
					isPopupHeader:true,
					isPopupInput:false,
					isPopupFooter:true,
					isPopupContent:false,
					title:'同意审核',
					name:_this.memberDetail.idcardname
				}
				_this.showPopup=true;
			},
			toCancel(){
				this.showPopup=false
			},
			popupAgree(){
				var _this=this,data={};
				data={
					ids:Number(_this.id),
					state:2,
					org_id:_this.memberDetail.org_id
				}
				checkMember(data).then(function(res){
					var e=res.data;
					if(e.errcode==0){
					// 	uni.showToast({
					// 		icon:"none",
					// 		title:e.msg
					// 	})
					// uni.navigateTo({
					// 	url:'/pages/memberManagement/memberManagement'
					// })
					uni.showModal({
						title: '',
						content: e.msg,
						showCancel:true,
						confirmText:"下一个",
						confirmColor:"#2680EB",
						success(res) {
							if (res.confirm) {
								if(_this.id_next==""||_this.id_next==null){
									uni.showToast({
										title:"无更多数据！",
										icon:"none"
									})
									var pages=getCurrentPages();
									var prePages = pages[pages.length - 2];//获取到上一个页面对象
									// console.log(pages)
									if (prePages == undefined || prePages == null) return; 
									prePages.onPullDownRefresh()
									uni.navigateBack({
										delta:1
									})
									return
								}
								_this.id=_this.id_next
								_this.getMemberDetail(_this.id_next)
							};
							if(res.cancel){
								var pages=getCurrentPages();
								var prePages = pages[pages.length - 2];//获取到上一个页面对象
								if (prePages == undefined || prePages == null) return; 	
								prePages.onPullDownRefresh();
								uni.navigateBack({
									delta:1
								})
							}
						}
					});
					}else if(e.errcode==1000||e.errcode==1001){
						uni.removeStorageSync('token');
						uni.reLaunch({
							url:'/pages/home/welcome'
						})
					}else{
						uni.showToast({
							position: 'center',
							icon: 'none',
							title:e.msg
						});
					}
					_this.showPopup=false;
				})
			},
			popupNotAgree(remark){
				var _this=this,data={};
				if(remark==""||remark==null){
					uni.showToast({
						title:"请输入拒绝理由",
						icon:"none"
					})
					return;
				}
				data={
					ids:Number(_this.id),
					state:2,
					org_id:_this.memberDetail.org_id,
					remark:remark
				}
				checkMember(data).then(function(res){
					var e=res.data;
					if(e.errcode==0){
						uni.showModal({
							title: '',
							content: e.msg,
							showCancel:true,
							confirmText:"下一个",
							confirmColor:"#2680EB",
							success(res) {
								 if (res.confirm) {
										if(_this.id_next==""||_this.id_next==null){
											uni.showToast({
												title:"无更多数据！",
												icon:"none"
											})
											var pages=getCurrentPages();
											var prePages = pages[pages.length - 2];//获取到上一个页面对象
											// console.log(pages)
											if (prePages == undefined || prePages == null) return; 
											prePages.onPullDownRefresh()
											uni.navigateBack({
												delta:1
											})
											return
										}
										_this.id=_this.id_next
										_this.getMemberDetail(_this.id_next)
									};
									if(res.cancel){
										var pages=getCurrentPages();
										var prePages = pages[pages.length - 2];//获取到上一个页面对象
										// console.log(pages)
										if (prePages == undefined || prePages == null) return; 
										prePages.onPullDownRefresh();
										uni.navigateBack({
											delta:1
										})
									}
							}
						});
					}else if(e.errcode==1000||e.errcode==1001){
						uni.removeStorageSync('token');
						uni.reLaunch({
							url:'/pages/home/welcome'
						})
					}else{
						uni.showToast({
							position: 'center',
							icon: 'none',
							title:e.msg
						});
					}
					_this.showPopup=false;
				})
			},
			imageError(){
				this.memberDetail['head_img']="https:"+this.$store.state.baseImgURL+"img/cert/demo.png"
			},
			booknoError(){
				this.memberDetail["bookno_img"]="https:"+this.$store.state.baseImgURL+"img/cert/no_level.jpg"
			},
			idcardError(){
				this.memberDetail["idcard_img"]="https:"+this.$store.state.baseImgURL+"img/cert/no_certificate.jpg"
			}
		}
	}
</script>

<style lang="less" scoped>
	.memberdetail{
		// padding-bottom: 40rpx;
	}
	.wrapper{
		padding-bottom: 100rpx;
	}
	.detail_header{
		margin: 24rpx 0;
		padding: 18rpx 0;
		background: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.detail_member{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.detail_top{
			margin-top: 30rpx;
		}
		.detail_bot{
			margin-bottom: 40rpx;
		}
		.detail_left{
			display: flex;
			flex-direction: row;
			font-size: 32rpx;
		}
		.detatil_img{
			margin-left: 42rpx;
			image{
				width: 130rpx;
				height: 182rpx;
			}
			margin-right: 42rpx;
		}
		.detail_name{
			
		}
		.sex{
			margin-right: 12rpx;
		}
	}
	.type_name{
		margin-left: 10rpx;
	}
	.detail_content{
		background: #fff;
		padding: 0 32rpx;
		.cell{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			border-bottom: 2rpx solid #F1F1F2;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #8E8E93;
		}
		.cell_check{
			color: #1A66FF;
		}
	}
	.detail_footer{
		margin-top: 24rpx;
		background: #fff;
		padding: 24rpx 24rpx 0 24rpx;
		.title{
			font-size: 32rpx;
		}
	}
	.detail_status{
		width: 138rpx;
		height: 56rpx;
		background:#FF2A2A;
		line-height: 56rpx;
		text-align: center;
		margin-top: 32rpx;
		color: #fff;
		opacity:1;
		border-radius:34rpx 0rpx 0rpx 34rpx;
	}
	.footer_content{
		.btns{
			width:24rpx;
			height:24rpx;
			background:rgba(255,255,255,1);
			border:6rpx solid rgba(26,102,255,1);
			border-radius:50%;
			opacity:1;
		}
		.pic_num{
			margin-left: 32rpx;
			margin-top: -8rpx;
		}
		.pic_header{
			display: flex;
			flex-direction: row;
			margin-top: 24rpx;
		}
		.pic_img{
			margin-top: 20rpx;
			margin-left: 50rpx;
			image{
				width: 400rpx;
				height: 328rpx;
			}
		}
	}
	.footer{
		position: fixed;
		bottom: 20rpx;
		// height: 88rpx;
		width: 100%;
		z-index: 1000;
		display: flex;
		flex-direction: row;
		// margin: 0 12rpx;
		.no_agree{
			width: 39%;
			// color: #BBBBBB;
			color: #1A66FF;
			border: 1px solid #1A66FF;
			background: #fff;
		}
		.agree{
			width: 57%;
			color: #fff;
			background: #1A66FF;
			// margin-left: 12rpx;
		}
	}
</style>
